<template>
  <div class="demo-page">
    <div class="header">
      <h1>城南花未开，老程已不在;</h1>
      <el-button 
        v-if="$checkPermission([`DemoPage.add`])"
        @click="addOneOrg"
      >
        新增
      </el-button>
    </div>
    <el-table
      ref="table"
      v-loading="tableLoading"
      class="table"
      stripe
      :data="tableData"
      empty-text="暂无数据"
      highlight-current-row
    >
      <el-table-column
        label="机构名称"
        min-width="260"
        header-align="left"
        prop="name"
        show-overflow-tooltip
      />
      <el-table-column
        prop="code"
        label="机构编码"
        min-width="82"
        header-align="left"
        show-overflow-tooltip
      />
      <el-table-column
        prop="pName"
        label="上级机构"
        min-width="152"
        header-align="left"
        show-overflow-tooltip
      />
      <el-table-column
        prop="region"
        label="所属市区"
        min-width="152"
        header-align="left"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建日期"
        min-width="152"
        header-align="left"
      />
      <el-table-column
        prop="enabled"
        label="状态"
        width="80"
        fixed="right"
      >
        <template #default="scope">
          <el-switch v-model="scope.row.enabled" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default { name: 'DemoPage' }
</script>

<script setup name="DemoPage">
import { ref, onMounted } from 'vue'
import { queryOrgList, addOrg } from '@/api/demoPage'
import { ElMessage } from 'element-plus'

const message = ref('What can i say, shiLin out!')
const tableData = ref([])
const tableLoading = ref(false)

// 挂载
onMounted(() => {
  console.log('DemoPage say: ', message)
  getOrgList()
})

// 查询机构列表
async function getOrgList() {
  tableLoading.value = true
  try {
    const params = {
      code: '',
      name: '',
      enabled: '',
      pageNum: 1,
      pageSize: 10,
    }
    const res = await queryOrgList.api(params)
    tableData.value = res.data.content
    console.log('tableData.value---------', tableData.value)
  } catch (error) {
    console.log('getOrgList 报错：', error)
  }
  tableLoading.value = false
}

// 新增一个机构
// eslint-disable-next-line no-unused-vars
async function addOneOrg() {
  try {
    const params = {
      name: '测试机构',
      code: '0001',
      level: '',
      enabled: true,
      remark: '',
      typeName: '测试2',
      pid: '0074bb0725c5470892ba0bdfaaa94c78',
      bypass: '1',
    }
    const res = await addOrg.api(params)
    console.log('新增一个机构---res---', res)
  } catch (error) {
    ElMessage.error(error.message)
    console.log('新增一个机构 报错：', error)
  }
}
</script>
<style lang="scss" scoped>
.demo-page {
  height: 100%;
  padding: 20px 24px;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
